<template>
	<view class="shop-card-box">
		<!--  @click="jump('/pages/index/index',{uuid:info.uuid})" -->
		<view class="shop-title u-flex">
			<view class="shop-title-left u-flex">
				<!-- <image src="" mode="aspectFill"></image> -->
				<view class="image" style="overflow: hidden;">
					<image :src="$BASE_URL + info.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="shop-title-left-info">

					<view class="info-top" style="font-size: 32rpx;color: #3D3D3D;margin-bottom: 20rpx;">
						{{info.name}}
					</view>
					<view class="info-bottom u-flex" style="font-size: 20rpx;color: #999999;">
						<view class="" style="display: flex; align-items: center;margin-right: 10rpx;"
							v-for="(item,index) in info.shop_lable_text" :key="index">
							<image :src="item.image_text" mode="aspectFill"
								style="width: 24rpx;height: 24rpx;margin-right: 10rpx;"></image>
							<text>{{item.name}}</text>
						</view>
					</view>

				</view>
			</view>
			<view class="shop-title-right">
				<view class="u-iconfont uicon-arrow-right" style="color:#bfbfbf ;font-size: 28rpx;"></view>
			</view>
		</view>

		<view class="shop-card-content">
			<scroll-view class="hot-box-content-scroll" scroll-x scroll-anchoring scroll-with-animation>
				<view class="hot-box-content-scroll-box">
					<view class="content-scroll-item" v-for="(item,index) in info.goods" :key="index"
						@click="redirect('/pages/goods/detail', { id: item.id  })">
						<view class="hot-goods-pic">
							<image class="no-icon"
								:src="$BASE_URL+'/uploads/20221207/ef589d5cad40d502c7539fe218ce1ae3.png'" mode="aspectFill"
								lazy-load v-if="index == 0"></image>
							<image class="no-icon"
								:src="$BASE_URL+'/uploads/20221207/e33d8ec00b19766f0de3079a79c5e2f4.png'" mode="aspectFill"
								lazy-load v-if="index == 1"></image>
							<image class="no-icon"
								:src="$BASE_URL+'/uploads/20221207/bae650765618b6ad6b5e198332ea4fb6.png'" mode="aspectFill"
								lazy-load v-if="index == 2"></image>

							<image :src="item.image" mode="aspectFill" lazy-load style="width: 100%;height: 100%;"
							@error="onError(info.goods,index)"
							>
							</image>



						</view>
						<view class="hot-goods-title">
							<text>{{item.title}}</text>
						</view>

					</view>


				</view>
			</scroll-view>

			<view class="enterShop" v-if="false" @click="jump('/pages/index/index',{uuid:info.uuid})">
				进入店铺
			</view>
		</view>
	</view>
</template>

<script>
	import defaultImage from '@/imgs/zwt.jpg'
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				defaultImage: defaultImage
			}
		},
		onLoad() {

		},
		methods: {


			onError(goodsList, index) {
				this.info.goods[index].image = this.defaultImage
			},
			jump(path, parmas) {
				this.showShare = false;
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			redirect(path, query) {
				uni.redirectTo({
					url: path + '?id=' + query.id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop-card-box {
		width: 710rpx;
		// height: 200rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		background: linear-gradient(114deg, rgba(255, 228, 203, 0.88) -11%, #FDFDF8 102%, rgba(255, 252, 235, 0.14) 102%);

		.shop-title {
			box-sizing: border-box;
			height: 128rpx;
			padding: 26rpx 40rpx;
			justify-content: space-between;

			.shop-title-left {
				.image {
					width: 84rpx;
					height: 84rpx;
					// background-color: aquamarine;
					margin-right: 20rpx;
					border-radius: 16rpx;
				}

				.shop-title-left-info {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.info-bottom {}
			}
		}

		.shop-card-content {
			height: 420rpx;
			background-color: #fff;
			padding: 25rpx 10rpx;
			box-sizing: border-box;

			.hot-box-content-scroll {
				// height: 340rpx;
				width: 690rpx;
				box-sizing: border-box;
				white-space: nowrap;

				.hot-box-content-scroll-box {
					height: 260rpx;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.content-scroll-item {
						// display: inline-block;
						width: 160rpx;
						height: 100%;
						// background-color: #FC514F;
						margin-right: 36rpx;

						.hot-goods-pic {
							position: relative;
							width: 160rpx;
							height: 160rpx;
							background-color: #9B9B9B;
							text-align: center;

							.no-icon {
								width: 32rpx;
								height: 36rpx;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 99;
							}
						}

						.hot-goods-title {
							box-sizing: border-box;
							padding: 8rpx;
							width: 160rpx;
							height: 70rpx;
							font-size: 22rpx;
							text-align: center;

							text {
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden; //溢出内容隐藏
								text-overflow: ellipsis; //文本溢出部分用省略号表示
								display: -webkit-box; //特别显示模式
								-webkit-line-clamp: 2; //行数
								line-clamp: 2;
								-webkit-box-orient: vertical; //盒子中内容竖直排列
							}


						}

						.hot-goods-price {
							text-align: center;
							font-weight: 800;
							font-size: 28rpx;
							color: #FC514F;
						}
					}

				}



			}

			.enterShop {
				width: 160rpx;
				padding: 6rpx 10rpx;
				text-align: center;
				border-radius: 40rpx;
				border: 2rpx solid gainsboro;
				margin: 20rpx auto;
			}
		}
	}
</style>
